<script setup>
import { ref } from 'vue';
import { List, Cell, Button, showDialog } from 'vant';
import { getTaskInstancePage, getTaskLog, getTaskLogTail } from '@/api/dolphin';
import { useRoute } from 'vue-router';


const route = useRoute();
const loading = ref(false);
const finished = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = ref(0);
const items = ref([]);
const value = ref('');
const clusterId = ref(route.params.clusterId || 'default-cluster-id');
const projectCode = ref(Number(route.params.projectCode) || 12345);

const onLoad = async () => {
  try {
    loading.value = true;
    const response = await getTaskInstancePage(
      clusterId.value, // 替换为实际的集群ID
      projectCode.value, // 替换为实际的项目代码
      currentPage.value,
      pageSize.value,
      undefined, // processInstanceId 可选参数
      value.value // 过滤条件
    );
    items.value.push(...response.records);
    totalItems.value = response.totalCount;

    if (items.value.length >= totalItems.value) {
      finished.value = true;
    }
  } catch (error) {
    console.error('加载任务实例失败:', error);
  } finally {
    loading.value = false;
  }
};

const showTaskLog = async (taskInstanceId) => {
  try {
    const logResponse = await getTaskLog(
      clusterId.value,
      projectCode.value,
      taskInstanceId
    );
    showDialog({
      title: '任务日志',
      message: logResponse.logContent,
      confirmButtonText: '确定'
    });
  } catch (error) {
    console.error('获取任务日志失败:', error);
  }
};

const viewTaskLogTail = async (taskInstanceId) => {
  try {
    const log = await getTaskLogTail(
      clusterId.value,
      projectCode.value,
      taskInstanceId,
      20  // 获取最后20行
    );
    showDialog({
      title: '任务日志',
      message: log || '暂无日志',
      confirmButtonText: '确定',
      className: 'task-log-dialog',
      messageAlign: 'left'
    });
  } catch (error) {
    console.error('获取日志失败:', error);
  }
};

const onSearch = () => {
  currentPage.value = 1;
  items.value = [];
  finished.value = false;
  onLoad();
};
</script>

<template>
  <div class="page-container">
    <div class="header">
      <h2 class="title">任务实例列表</h2>
      <van-search
        v-model="value"
        placeholder="搜索任务名称"
        shape="round"
        background="#f7f8fa"
        @search="onSearch"
      />
    </div>
    
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多数据了"
      @load="onLoad"
      class="task-list"
    >
      <van-cell
        v-for="(item, index) in items"
        :key="index"
        :title="item.name"
        is-link
        @click="showTaskLog(item.id)"
        class="task-item"
      >
        <template #label>
          <span class="task-info">
            <span class="task-id">ID: {{item.id}}</span>
            <span class="task-time">{{new Date(item.startTime).toLocaleString()}}</span>
          </span>
        </template>
        <template #right-icon>
          <div class="action-buttons">
            <van-button
              round
              type="success"
              size="small"
              icon="passed"
              name="task-status"
              class="status-btn"
            ></van-button>
            <van-button 
              round 
              type="primary" 
              size="small" 
              icon="description-o"
              name="view-task-log"
              title="查看任务日志"
              class="log-btn"
              @click.stop="viewTaskLogTail(item.id)"
            ></van-button>
          </div>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.page-container {
  .header {
    margin-bottom: 16px;
    
    .title {
      margin: 0 0 16px;
      font-size: 20px;
      font-weight: 600;
      color: var(--text-color);
    }
  }
  
  .task-list {
    .task-item {
      position: relative;
      
      .task-info {
        display: flex;
        gap: 16px;
        color: var(--text-color-secondary);
        font-size: 12px;
        
        .task-id {
          font-family: monospace;
        }
      }
      
      .action-buttons {
        display: flex;
        gap: 8px;
        align-items: center;
        
        .status-btn {
          opacity: 0.8;
          &:hover {
            opacity: 1;
          }
        }
        
        .log-btn {
          opacity: 0.8;
          &:hover {
            opacity: 1;
          }
        }
      }
    }
  }
}

// 日志弹窗样式
:deep(.task-log-dialog) {
  .van-dialog__message {
    white-space: pre-wrap;
    font-family: 'Fira Code', monospace;
    max-height: 60vh;
    overflow-y: auto;
    padding: 16px;
    background-color: #1e1e1e;
    color: #d4d4d4;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 3px;
    }
  }
}
</style>
